de joomla 1 à joomla 3...

[RobertG]

Merci. Je viens de te répondre par MP. Je n'arrive à me connecter ni au site ni à l'administration de ton compte chez l'hébergeur.

[jfp22]

merci pour tout

j'avance doucement mais surement

je vais utiliser un template par défaut, plus simple à mon sens, surtout pour les mises à jour
je suis à la recherche site qui pourrait me dire comment on modifie les couleurs du template :
Beez3 - Default

[pmleconte]

Bonjour Jeff,

Le template beez3 utilise un fichier user.css pour stocker les adaptations.

La plupart des définitions des polices de caractères, tailles, couleurs sont dans le fichier layout.css.

Si, par exemple, vous souhaitez modifier la couleur de fond de votre site, ainsi que la couleur des caractères des titres (h1/h2/...), il faut entrer dans votre fichier user.css :

#all { /* couleur de fond du template */
background:grey;
}
body h1, body h2 { /* couleur des titres h1 et h2 */
  color:blue
}

OK, c'est moche, mais, cela donne une idée de ce que l'on peut faire.

Pascal

[pmleconte]

Petite remarque : le template par défaut Protostar a l'avantage d'être "responsive" (s'adapte en fonction de la taille de l'écran).

Dans ce cas, le fichier user.css pourra contenir:

.container { /* couleur de fond du template */
background-color:grey !important;
}
h1, h2 { /* couleur des titres h1 et h2 */
  color:blue
}

Remarque: au niveau de protostar, on peut paramétrer les couleurs par défaut dans le menu du template.

Pascal

PS: le fichier user.css pour beez3 et protostar doit être dans le répertoire css du template.

[jfp22]

merci à tous les 2

je n'ai pas trouvé le fichier user.css dans le répertoire CSS
par contre j'ai trouver celui ci : template.css (ci dessous) mais je n'ai aps grand chose à modifier
je ne connais rien à tous ses langages lol
mais je m'adapte vite :-)

c'est celui ci que je peux modifier pour les couleurs de mon site ?
puis je créer une copie de beez3 en beez4 par exemple
pour conserver beez3
et faire de beez4 MON CSS à moi ?

/**
 * @author Design & Accessible Team ( Angie Radtke  )
 * @package Joomla
 * @subpackage Accessible-Template-Beez
 * @copyright Copyright (C) 2005 - 2019 Open Source Matters. All rights reserved.
 * @license GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant to the
 * GNU General Public License, and as distributed it includes or is derivative
 * of works licensed under the GNU General Public License or other free or open
 * source software licenses. See COPYRIGHT.php for copyright notices and
 * details.
 */


body {
    background: #000000;
    color: #000000;
    font-size: 100.1%;
    padding: 0px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.contentpane {
    width:auto;
    margin:10px;
    text-align: left;
}

img { border: 0 none; }

[pmleconte]

Bonjour,

Il ne faut pas toucher aux fichiers "standards", car, à chaque mise à jour Joomla, ils peuvent être remplacés.

Donc, pour créer le fichier user.css, il faut aller dans l'administration, menu Extensions, Templates et sous-menu Templates. Sélectionnez votre template dans la liste en cliquant sur "<nom du template>Détails et fichiers". Vous devez obtenir une liste avec en colonne gauche css/html/images/....

Au dessus, vous avez une série de boutons, dont "Nouveau fichier" sur lequel il faut cliquer.

Vous obtenez alors une boite de dialogue avec à gauche la liste des répertoires, commençant par le répertoire css. Cliquez sur css et cela le sélectionne. Ensuite, dans la colonne de droite, entrez user dans l'edit "Nom du fichier" puis sélectionnez css dans la liste "sélectionnez un type de fichier" et, finalement, cliquez sur le bouton "Créer".

Vous obtenez alors une edit dans laquelle vous pouvez mettre votre code css.

Pascal

[jfp22]

Bonjour,

Il ne faut pas toucher aux fichiers "standards", car, à chaque mise à jour Joomla, ils peuvent être remplacés.

Donc, pour créer le fichier user.css, il faut aller dans l'administration, menu Extensions, Templates et sous-menu Templates. Sélectionnez votre template dans la liste en cliquant sur "<nom du template>Détails et fichiers". Vous devez obtenir une liste avec en colonne gauche css/html/images/....

Au dessus, vous avez une série de boutons, dont "Nouveau fichier" sur lequel il faut cliquer.

Vous obtenez alors une boite de dialogue avec à gauche la liste des répertoires, commençant par le répertoire css. Cliquez sur css et cela le sélectionne. Ensuite, dans la colonne de droite, entrez user dans l'edit "Nom du fichier" puis sélectionnez css dans la liste "sélectionnez un type de fichier" et, finalement, cliquez sur le bouton "Créer".

Vous obtenez alors une edit dans laquelle vous pouvez mettre votre code css.

Pascal

merci pour le tuto
il faut que je créé un CSS dans son intégralité ?
si c'est le cas ,c'est mort j'en suis incapable !

y aurait il une solution simple pour le newbie que je suis ?

garder un template natif mais avec son propre code couleur ?

[RobertG]

Bonjour,

Non, il suffit que tu ajoutes dans ce fichier la définition à modifier. Par exemple dans le fichier d'origine, tu as :

body.contentpane {
width:auto;
margin:10px;
text-align: left; }

Tu veux changer seulement la marge, tu vas écrire dans ton user.css

body.contentpane {
margin:25px;
}

[jfp22]

c'est bien cela le problème
je ne suis pas capable de créer ce code ...

peut on récupérer dans beez 3 tout les codes :

polices
taille police
couleur fond de page
couleur modules
couleurs menus
etc...

bref quels sont tous les codes utilisés dans le CSS natif
afin que je puisse les modifier dans le fichier que je créerai ?

[RobertG]

Ce code, tu n'as pas à le créer si tu veux en changer certains paramètres, il te suffit de copier dans le fichier d'origine la partie que tu veux modifier, la coller (comme je l'ai fait ici) dans le fichier user.css de faire ta ou tes modifications et de l'enregistrer.
Le plus simple pour savoir ce qui est à modifier est d'utiliser la console et l'explorateur de code de ton navigateur (F12 sous Firefox et Chrome, pour les auters, ne m'en servant pas, je ne sais pas), dont la flèche tout à gauche te permet de pointer sur le texte dont tu veux changer l'aspect. Là tu cliques,et dans la zone de droite de l'explorateur, tu verras la définition actuelle : tu pourras tester tes modifications directement dans cette zone, puis cliquer sur le nom du fichier affiché sur la première ligne de la partie modifiée, ce qui t'amènera au code lui-même : copie, puis colle dans user.css et supprime si besoin ce que tu n'as pas à modifier. Comme dans mon exemple, tu peux en effet ne laisser que les instructions qui t'intéressent.